<template>
  <view class="container" :style="{ paddingTop: statusBarHeight + 'px' }">
    <uni-nav-bar title="点采详情" fixed :border="false" height="88rpx" background-color="#f7f7f7" left-icon="left"
      @clickLeft="onClickLeft"></uni-nav-bar>
    <view class="main" :style="{ paddingBottom: safeAreaBottom + 'px' }">
      <view class="topCard">
        <view class="balance">预充值余额：{{ balance }}元</view>
        <view class="sum">当前采购总价：{{ totalMoney }}元</view>
      </view>
      <view class="listBox">
        <scroll-view style="height: calc(100%);box-sizing: border-box;"
          :style="{ paddingBottom: `calc(${safeAreaBottom}px + 10rpx	)` }" scroll-y enhanced :show-scrollbar="false"
          :scroll-with-animation="true" refresher-enabled @refresherrefresh="pulldownRefresh"
          :refresher-triggered="triggered" @touchmove.stop>
          <view class="list" v-if="ordergoodsDetailList.length > 0">
            <view class="item" v-for="item in ordergoodsDetailList" :key="item.id">
              <view class="top">
                <view class="title u-ellipsis" style="width: 100%;">{{ item.name }}</view>

              </view>
              <view class="bottom">
                <view class="pic">
                  <image :src="item.imgUrl ? item.imgUrl : '/static/index/noneImg.png'" mode="aspectFill"></image>
                </view>
                <view class="info">
                  <view class="sub_title">配送规格：{{ item.deliveryNorms }}KG</view>
                  <view class="sub_title">点采价：{{ item.outboundPrice }}元</view>
                  <view class="sub_title">规格数量：{{ item.deliveryCount }}</view>
                  <view class="sub_title">总量：{{ item.buyCount }}KG</view>
                  <view class="sub_title">合计：{{ item.pickMoney }}元</view>
                  <view class="sub_title"></view>
                </view>
              </view>
            </view>
          </view>
          <view
            style="width: 100%;height: 100%;background-color: #f7f7f7;display: flex;justify-content: center;align-items: center;"
            v-if="ordergoodsDetailList.length == 0">
            <image src="/static/index/nonedata.png" mode="aspectFill" style="width: 400rpx;height: 400rpx;"></image>
          </view>
        </scroll-view>
      </view>
      <view class="bottomFix" v-if="status == '2'">
        <text>备注：{{ remark ? remark : '无' }}</text>
      </view>
    </view>
  </view>
</template>

<script>
import { reqNonstandardOrderDetail } from '@/apis/member'
export default {
  name: "NoWaitSubmit",
  data() {
    return {
      balance: 0,
      ordergoodsDetailList: [],
      triggered: false,
      totalMoney: 0,
      id: '',
      remark: '',
      status: ''
    }
  },
  onShow() {
    this.reqNonstandardOrderDetail();
  },
  onLoad(params) {
    this.id = params?.id;
    this.status = params?.status;
  },
  methods: {
    async reqNonstandardOrderDetail() {
      const res = await reqNonstandardOrderDetail({ id: this.id })
      if (res.code === 200) {
        console.log('res.data.ordergoodsDetailList', res.data);
        this.balance = res.data.balance
        this.totalMoney = res.data.totalMoney
        this.remark = res.data.remark
        // this.status = res.data.states
        this.triggered = false
        this.ordergoodsDetailList = res.data.detailsList
      }
    },
    refreshStatus() {

    },
    scrolltolower() {

    },
    pulldownRefresh() {
      this.triggered = true
      this.reqNonstandardOrderDetail();
    }
  }
}
</script>

<style>
page {
  background: #f7f7f7;

}
</style>
<style lang="scss" scoped>
view {
  box-sizing: border-box;
}

.container {
  height: 100vh;
}

.main {
  height: calc(100% - 88rpx);
  // overflow-y: scroll;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  // padding-bottom: ;
}

.topCard {
  height: 80rpx;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 20rpx;
  font-size: 28rpx;
  background-color: #fff;
  border: 1px solid #eee;
}

.list {
  padding: 20rpx 20rpx;
  padding-bottom: 0;

  .item {
    padding: 20rpx 24rpx;
    background-color: #fff;
    border-radius: 8rpx;
    margin-bottom: 20rpx;

    &:last-child {
      margin-bottom: 0;
    }

    .top {
      display: flex;
      justify-content: space-between;
      align-items: center;
      width: 100%;
      margin-bottom: 10rpx;

      .title {
        width: 60%;
        font-size: $uni-font-size-upBase;
        color: #000;
      }

      .sub_title {
        font-size: $uni-font-size-mini;
        flex: 1;
        color: #333;
        text-align: right;
      }
    }

    .bottom {
      display: flex;

      .pic {
        width: 200rpx;
        height: 200rpx;

        image {
          width: 100%;
          height: 100%;
          background-color: #f7f7f7;
        }
      }

      .info {
        padding-left: 20rpx;
        flex: 1;
        min-width: 440rpx;
        display: flex;
        flex-wrap: wrap;
        align-items: center;

        .sub_title {
          font-size: $uni-font-size-mini;
          width: 50%;
          color: #333;

          &:last-child {
            text-align: right;
            width: 20%;
          }

          &:nth-last-child(2) {
            display: flex;
            align-items: center;
            width: 80%;
          }
        }
      }
    }
  }
}

.listBox {
  flex: 1;
  overflow: scroll;
}

.bottomFix {
  // position: fixed;
  width: 100%;
  max-height: 200rpx;
  overflow: scroll;
  // height: 80rpx;
  // bottom: 0;
  padding: 20rpx 10rpx;
  background: #dce8fa;
  font-size: $uni-font-size-base;

}
</style>